<template>
	<view class="page change-password-page show">
		<view class="page-content">
			<u-form :model="billData" :rules="billDataRules"  ref="billDataForm" labelWidth="80" labelAlign="right"
				:borderBottom="true">
				<u-form-item label="票据代码" prop="einvoiceCode" borderBottom>
					<u-input placeholder="请输入票据代码" v-model="billData.einvoiceCode" class="input-item"></u-input>
				</u-form-item>
				<u-form-item label="票据号码" prop="einvoiceNumber" borderBottom>
					<u-input placeholder="请输入票据号码" v-model="billData.einvoiceNumber" class="input-item"></u-input>
				</u-form-item>
				<u-form-item label="校验码" prop="randomNumber" borderBottom>
					<u-input placeholder="请输入校验码" v-model="billData.randomNumber" class="input-item"></u-input>
				</u-form-item>
				<u-form-item label="票据金额" prop="amount" borderBottom>
					<u-input placeholder="请输入票据金额" v-model="billData.amount" class="input-item"></u-input>
				</u-form-item>
				<u-form-item label="开票日期" borderBottom>
					<uni-datetime-picker type="date" placeholder="请选择开票日期" v-model="billData.issueDate"
						@change="confirmDate" />
				</u-form-item>
				<u-form-item label="验证码" borderBottom prop="imaCode">
					<u-input placeholder="请输入验证码" v-model="billData.imaCode" class="input-item">
						<template slot="suffix">
							<u-image :src="billData.imaSrc" width="100px" height="40px" @click="clickImg"></u-image>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="短信内容"  borderBottom>
					<u-textarea placeholder="请输入短信内容" v-model="billData.msg" count></u-textarea>
				</u-form-item>
				<u-form-item>
					<view class="bothBtn">
						<button ref="confirmBtn" size="mini" type="primary" class="action-btn"
							@click="searchBillAuto">识别</button>
						<button ref="confirmBtn" size="mini" type="primary" class="action-btn"
							@click="clearMsg">清除</button>
					</view>
				</u-form-item>
				
				<!-- <u-form-item label="短信内容">
					<u-textarea v-model="billData.msg" placeholder="请输入短信内容"></u-textarea>
					<view class="bothBtn">
						<button ref="confirmBtn" size="mini" type="primary" class="action-btn"
							@click="searchBillAuto">识别</button>
						<button ref="confirmBtn" size="mini" type="primary" class="action-btn"
							@click="clearMsg">清除</button>
					</view>
				</u-form-item> -->
				<u-form-item>
					<u-button ref="confirmBtn" type="primary" @click="searchBill">查找电子票</u-button>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		distinguish,
		appletkaptcha,
		postCheck
	} from '@/api/homeApi.js'
	import {
		getApiHost
	} from '@/utils/request.js'
	console.log('???', getApiHost())
	const $host = getApiHost()
	export default {
		data() {
			return {
				billData: {
					payer: '', //缴款人
					einvoiceCode: '', //票据代码
					einvoiceNumber: '', //票据号码
					amount: '', // 票据金额 2020.8.27
					issueDate: '', //开票日期 2020.8.27
					randomNumber: '', //校验码
					msg: '', //短信内容
					imaCode: '', //验证码
					imaSrc: $host + '/officialaccount/static/appletkaptcha?uid=' + uni.getStorageSync('uid') + '&time=' +
						new Date().getTime()
				},
				// 校验规则
				billDataRules: {
					einvoiceCode: [{
						required: true,
						message: '票据代码不能为空',
						trigger: 'blur'
					}],
					einvoiceNumber: [{
						required: true,
						message: '票据号码不能为空',
						trigger: 'blur'
					}],
					randomNumber: [{
						required: true,
						message: '校验码不能为空',
						trigger: 'blur'
					}],
					amount: [{
						required: true,
						message: '票据金额不能为空',
						trigger: 'blur'
					}],
					imaCode: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],

				}
			}
		},
		created() {

		},
		methods: {
			confirmDate(e) {
				console.log('qi', e)
			},
			async clickImg() {
				console.log('dianji')

				uni.showLoading({
					title: '加载中'
				})
				const src = $host + '/officialaccount/static/appletkaptcha?uid=' + uni.getStorageSync('uid') +
					'&time=' + new Date().getTime();
				this.billData.imaSrc = src
				uni.hideLoading()
			},
			async searchBill() {
				this.$refs.billDataForm.validate().then(async val => {
					uni.showLoading({
						title: '加载中'
					})
					const res = await postCheck(this.billData)
					if (res.data.result == 0) {
						uni.$u.toast('查找成功');
						uni.hideLoading()
						// 跳转到票据详情页
						uni.navigateTo({
							url: '/pages/home/billdetail?handItem=' + encodeURIComponent(JSON
								.stringify(res.data))
						})
					} else {
						uni.$u.toast(res.data.message || '查找失败');
						uni.hideLoading()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			},
			async searchBillAuto() {
				if (this.billData.msg == '') {
					return uni.$u.toast('请输入短信内容');
				}
				uni.showLoading({
					title: '加载中'
				})
				const res = await distinguish(this.billData.msg)
				if (res.data.result == 0) {
					uni.$u.toast('识别成功');
					this.billData.amount = res.data.amount
					this.billData.einvoiceCode = res.data.einvoiceCode
					this.billData.einvoiceNumber = res.data.einvoiceNumber
					this.billData.issueDate = res.data.issueDate
					this.billData.randomNumber = res.data.randomNumber
					uni.hideLoading()
				} else {
					uni.$u.toast(res.data.message || '识别失败');
					uni.hideLoading()
				}
			},

			clearMsg() {
				this.billData.msg = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bothBtn {
		margin-left: auto;
		width: 70%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .action-btn {
		width: 40%;
	}

	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 20;
		transform: translateX(100%);
		transition: all 0.3s ease-in-out;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.page.show {
		transform: translateX(0);
	}

	.page-content {
		padding: 40rpx;
	}

	/* 输入框样式 */
	.input-item {
		height: 90rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #f9f9f9;
	}
</style>